<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            <h1>
                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId" />
            </h1>
        </ion-title>

        <ion-buttons slot="end">
            <ion-button *ngIf="loaded" (click)="showToc()" aria-haspopup="true" [ariaLabel]="'addon.mod_imscp.toc' | translate">
                <ion-icon name="fas-list-ul" slot="icon-only" aria-hidden="true" />
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <!-- Content. -->
    <core-loading [hideUntil]="loaded">

        <ion-card class="core-warning-card" *ngIf="warning">
            <ion-item>
                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                <ion-label><span [innerHTML]="warning"></span></ion-label>
            </ion-item>
        </ion-card>

        <core-iframe *ngIf="loaded" [src]="src" [showFullscreenOnToolbar]="true" [autoFullscreenOnRotate]="true" />
    </core-loading>

    <core-navigation-bar collapsible-footer appearOnBottom *ngIf="loaded && navigationItems.length > 1" [items]="navigationItems"
        (action)="loadItem($event)" />
</ion-content>
